{% extends "base.html" %}

{% block title %}报警设置 - Camera Pi{% endblock %}

{% block sidebar %}
<div class="list-group list-group-flush">
    <a href="/manage/archive" class="list-group-item list-group-item-action">
        <i class="bi bi-archive"></i> 视频归档管理
    </a>
    <a href="/manage/alert" class="list-group-item list-group-item-action active">
        <i class="bi bi-bell"></i> 报警设置
    </a>
    <a href="/manage/user" class="list-group-item list-group-item-action">
        <i class="bi bi-person"></i> 用户信息
    </a>
</div>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 mb-4">
            <h2><i class="bi bi-bell"></i> 报警设置</h2>
            <p class="lead">配置系统报警规则和通知方式</p>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">报警规则</h5>
                </div>
                <div class="card-body">
                    <form id="alertForm">
                        <div class="mb-3">
                            <label class="form-label">人脸识别报警</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="faceAlert" checked>
                                <label class="form-check-label" for="faceAlert">启用未知人脸报警</label>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">声音报警</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="soundAlert" checked>
                                <label class="form-check-label" for="soundAlert">启用异常声音报警</label>
                            </div>
                            <div class="mt-2">
                                <label class="form-label">声音阈值 (dB)</label>
                                <input type="range" class="form-range" id="soundThreshold" min="0" max="100" value="60">
                                <small class="text-muted">当前值: <span id="soundThresholdValue">60</span> dB</small>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">移动侦测报警</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="motionAlert" checked>
                                <label class="form-check-label" for="motionAlert">启用移动侦测报警</label>
                            </div>
                            <div class="mt-2">
                                <label class="form-label">灵敏度</label>
                                <input type="range" class="form-range" id="motionSensitivity" min="1" max="10" value="5">
                                <small class="text-muted">当前值: <span id="motionSensitivityValue">5</span></small>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">报警时间</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="time" class="form-control" id="alertStartTime" value="22:00">
                                </div>
                                <div class="col-md-6">
                                    <input type="time" class="form-control" id="alertEndTime" value="06:00">
                                </div>
                            </div>
                            <small class="text-muted">在此时间段内启用报警</small>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save"></i> 保存设置
                        </button>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">通知方式</h5>
                </div>
                <div class="card-body">
                    <form id="notificationForm">
                        <div class="mb-3">
                            <label class="form-label">邮件通知</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="emailNotification" checked>
                                <label class="form-check-label" for="emailNotification">启用邮件通知</label>
                            </div>
                            <div class="mt-2">
                                <input type="email" class="form-control" id="emailAddress" placeholder="接收通知的邮箱地址">
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">短信通知</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="smsNotification">
                                <label class="form-check-label" for="smsNotification">启用短信通知</label>
                            </div>
                            <div class="mt-2">
                                <input type="tel" class="form-control" id="phoneNumber" placeholder="接收通知的手机号码">
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">微信通知</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="wechatNotification" checked>
                                <label class="form-check-label" for="wechatNotification">启用微信通知</label>
                            </div>
                            <div class="mt-2">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="wechatId" placeholder="微信ID">
                                    <button class="btn btn-outline-secondary" type="button" onclick="scanWechatQR()">
                                        <i class="bi bi-qr-code"></i> 扫码绑定
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">通知内容</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="notifyImage" checked>
                                <label class="form-check-label" for="notifyImage">包含现场图片</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="notifyVideo" checked>
                                <label class="form-check-label" for="notifyVideo">包含视频片段</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="notifySound" checked>
                                <label class="form-check-label" for="notifySound">包含声音片段</label>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save"></i> 保存设置
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 声音阈值滑块事件
document.getElementById('soundThreshold').addEventListener('input', function(e) {
    document.getElementById('soundThresholdValue').textContent = e.target.value;
});

// 移动侦测灵敏度滑块事件
document.getElementById('motionSensitivity').addEventListener('input', function(e) {
    document.getElementById('motionSensitivityValue').textContent = e.target.value;
});

// 保存报警设置
document.getElementById('alertForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // 实现保存报警设置功能
});

// 保存通知设置
document.getElementById('notificationForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // 实现保存通知设置功能
});

// 扫描微信二维码
function scanWechatQR() {
    // 实现微信扫码绑定功能
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化页面
});
</script>
{% endblock %} 